<template>
	<div>
		<div class="contain">
			<div class="mainInfo">
				<div class="mianInfo-left active">数据概况</div>
				<div class="mianInfo-right">授课月统计</div>
			</div>
			<el-divider />
			<el-row :gutter="20">
				<el-col :span="24">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span>授课课时</span>
								<el-button class="button" text>
								<div class="minwidth">
										<el-select
										v-model="value"
										placeholder="近十五天"
										size="default"
									>
										<el-option
											ref="selects"
											v-for="item in options"
											:key="item.value"
											:label="item.label"
											:value="item.value"
											:disabled="item.disabled"
										/>
									</el-select>
								</div>
								</el-button>
							</div>
						</template>
						<div class="text1">
							<bigecharts></bigecharts>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div class="marginTop"></div>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span>考勤分析</span>
								<el-button class="button" text>
									<div class="minwidth">
										<el-select
										v-model="value"
										placeholder="近十五天"
										size="default"
									>
										<el-option
											ref="selects"
											v-for="item in options"
											:key="item.value"
											:label="item.label"
											:value="item.value"
											:disabled="item.disabled"
										/>
									</el-select>
									</div>
								</el-button>
							</div>
						</template>
						<div class="text1">
							<attendanceAnalysis></attendanceAnalysis>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span>学员出勤率</span>
								<el-button class="button" text>
									<div class="minwidth">
										<el-date-picker
										v-model="value1"
										type="date"
										placeholder="Pick a day"
										:size="small"
									/>
									</div>
								</el-button>
							</div>
						</template>
						<div class="text1">
							<pointplot></pointplot>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<div class="marginTop"></div>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span>授课课程排名(TOP30)</span>
								<el-button class="button" text>
									<div class="minwidth">
										<el-select
										v-model="value"
										placeholder="近十五天"
										size="default"
									>
										<el-option
											ref="selects"
											v-for="item in options"
											:key="item.value"
											:label="item.label"
											:value="item.value"
											:disabled="item.disabled"
										/>
									</el-select>
									</div>
								</el-button>
							</div>
						</template>
						<div class="text1">
							<barchart1></barchart1>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span>授课老师排名(TOP30)</span>
								<el-button class="button" text>
									<div class="minwidth">
										<el-select
										v-model="value"
										placeholder="近十五天"
										size="default"
									>
										<el-option
											ref="selects"
											v-for="item in options"
											:key="item.value"
											:label="item.label"
											:value="item.value"
											:disabled="item.disabled"
										/>
									</el-select>
									</div>
								</el-button>
							</div>
						</template>
						<div class="text1">
							<barchart2></barchart2>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
// import echarts from "echarts";
import bigecharts from '@/components/content/data/academic/bigecharts';
import attendanceAnalysis from '@/components/content/data/academic/attendanceAnalysis';
import pointplot from '@/components/content/data/academic/pointplot';
import barchart1 from '@/components/content/data/academic/barchart1';
import barchart2 from '@/components/content/data/academic/barchart2';
const value = ref('');
const value1 = ref('');
const options = [
	{
		value: '近一周',
		label: '近一周'
	},
	{
		value: '近15天',
		label: '近15天'
	},
	{
		value: '近30天',
		label: '近30天'
	},
	{
		value: '自定义',
		label: '自定义'
	}
];
</script>

<style lang="scss" scoped>
.active{
	color: #1890FF;
}
.mainInfo {
	display: flex;
	justify-self: center;
	margin-top: 18px;
	font-size: 14px;
	.mianInfo-left {
		margin-right: 15px;
	}
}
.marginTop {
	height: 20px;
}

.contain {
	padding: 10px;
}
.selects {
	width: 49%;
}
.minwidth{
	width: 120px;
}
</style>
